<template>
  <view class="container">
    <view class="list" v-if="list.length > 0">
      <u-swipe-action :show="item.show" :index="index" v-for="(item, index) in list" :key="index" @click="click" @open="open" :options="options">
        <view class="item u-border-bottom" @click="$u.route(`/pages/article/article?id=${item.id}`)">
          <image v-if="item.thumbnail" mode="aspectFill" :src="item.thumbnail" />
          <!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
          <view class="title-wrap">
            <text class="title u-line-2">{{ item.title }}</text>
          </view>
        </view>
      </u-swipe-action>
      <u-loadmore :status="status" bg-color="#f8f8f8" margin-top="50" margin-bottom="50" @loadmore="loadMore" :loadText="loadText" />
    </view>
    <view class="empty-box" v-else><u-empty mode="list" /></view>
    <view class="add" @click.stop="$u.route('/pages/my/myArticle/logArticle')">
      <u-icon name="plus" color="#47d5d5" size="80"></u-icon>
      <text class="text">发布文章</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      options: [{ text: '编辑', style: { backgroundColor: '#007aff' } }, { text: '删除', style: { backgroundColor: '#dd524d' } }],
      page: 1,
      status: 'loading',
      loadText: {
        loadmore: '点击或轻轻上拉',
        loading: '努力加载中',
        nomore: '实在没有了'
      }
    };
  },
  onShow(options) {
    this.list = [];
    this.page = 1;
    this.getList();
  },
  onReachBottom() {
    this.loadMore();
  },
  methods: {
    getList() {
      this.status = 'loading';
      this.$api.get({
        url: 'portal/articles/my',
        data: {
          page: `${this.page},20`, // 一页显示20条
          field: 'id,post_title,thumbnail,published_time'
        },
        success: res => {
          if (res.code == 1) {
            let list = res.data.list.map(item => {
              return {
                id: item.id,
                title: item.post_title,
                thumbnail: item.thumbnail,
                show: false
              };
            });
            this.list = this.list.concat(list);
            // 分页判断
            if (list.length < 20) {
              this.status = 'nomore';
            } else {
              this.status = 'loadmore';
              this.page++;
            }
          }
        }
      });
    },
    loadMore() {
      if (this.status === 'loadmore') {
        this.getList();
      }
    },
    click(index, type) {
      if (type == 0) {
        this.$u.route(`/pages/my/myArticle/logArticle?id=${this.list[index].id}`);
      }
      if (type == 1) {
        let that = this;
        uni.showModal({
          title: '提示',
          content: '确认删除该文章？',
          confirmText: '确认',
          success: res => {
            if (res.confirm) {
              that.$api.post({
                url: `portal/articles/delete`,
                data: {
                  id: that.list[index].id
                },
                success: res => {
                  that.$u.toast(res.msg);
                  if (res.code == 1) {
                    that.list.splice(index, 1);
                  }
                }
              });
            }
          }
        });
      }
    },
    // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
    open(index) {
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效
      this.list[index].show = true;
      this.list.map((val, idx) => {
        if (index != idx) this.list[idx].show = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.add {
  position: fixed;
  bottom: 50rpx;
  right: 50rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .text {
    font-size: 24rpx;
    color: #999999;
  }
}
.list {
  .item {
    width: 750rpx;
    display: flex;
    padding: 20rpx;
  }

  image {
    width: 120rpx;
    flex: 0 0 120rpx;
    height: 120rpx;
    margin-right: 20rpx;
    border-radius: 12rpx;
  }

  .title {
    text-align: left;
    font-size: 28rpx;
    color: $u-content-color;
    margin-top: 20rpx;
  }
}
</style>
